<template>
  <div class="fire-map-wrapper img-container">
    <div id="map" class="map-wrapper" ref="map" style="width: 100%; height: 100%"></div>
    <div class="img-contaienr__footer"></div>
    <ul class="legend">
      <li>县市机关</li>
      <li>监控</li>
      <li>消防水泵</li>
      <li>消防站</li>
    </ul>
  </div>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
export default {
  data() {
    return {
      // 地图
      map: null,
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      document.getElementById('app').style.backgroundColor = '#000';
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f01023d9e7977aa8946e0137daf05a2b',
            }),
            // setStyle: "black",
          }),
          new TileLayer({
            className:'blueLayer',
            source: new XYZ({
              url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f01023d9e7977aa8946e0137daf05a2b',
            }),
            // setStyle: "black",
          }),
        ],
        view: new View({
          center: [118.1163, 24.4673],
          zoom: 12,
          projection: 'EPSG:4326',
        }),

        // 使用 Vue 的 ref 来引用 DOM 元素
        target: this.$refs.map,
      });
    }
  },
  components: {},
};
</script>

<style lang="less" scoped>
.fire-map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  .legend {
    width: 95px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    padding: 5px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    li {
      text-align: left;
      cursor: pointer;
    }
  }
  
.blueLayer{
    filter:grayscale(100%) sepia(51%) invert(100%) saturate(350%) ;
}
}
</style>
